<template>
	<div id="MyCard">
		<x-header :left-options="{showBack: false}" title="发布帖子" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="tabWrap vux-1px-b">
			<tab :line-width="2" active-color='#a30000' custom-bar-width="36px">
				<tab-item class="vux-center" v-for="item in tablist" :selected="item.name === '已发布'" @on-item-click="getMyCardList(item.type)" :key="item.type">{{item.name}}</tab-item>
			</tab>
		</div>
		<div v-if="globalIndex == 0" class="upload-wrap">
			<ul>
				<li v-for="item in memberThread" class="upload-list vux-1px-b">
					<img v-if="item.thread_imgs != ''" :src="item.thread_imgs" alt="" />
					<img v-else src="../assets/images/home/defaultImg.jpg" alt="" />
					<div class="desc">
						<p v-html="item.thread_content"></p>
						<h5>{{common.threadTime(new Date(item.add_time)/1000)}}</h5>
						<div class="bottom  note">
							<ul class="browse-data">
								<li>
									<span>{{item.thread_vcount}}</span>
									<i class="tribune-icon tribune-card-see"></i>
								</li>
								<li>
									<span>{{item.thread_vlike}}</span>
									<i class="tribune-icon tribune-praise"></i>
								</li>
								<li>
									<span>{{item.sub_count}}</span>
									<i class="tribune-icon tribune-comment"></i>
								</li>
							</ul>
							<i class="card-share tribune-card-share"></i>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<div v-if="globalIndex == 1" class="upload-wrap">
			<ul>
				<li class="upload-list vux-1px-b">
					<img src="../assets/images/home/defaultImg.jpg" alt="" />
					<div class="desc">
						<p>我是天空里的一片云 偶尔投影在你的波心 你不必讶异 更无须欢喜 在转瞬间消灭了踪影 你记得也好 最好你忘掉 在这交会时互放的光亮 </p>
						<div class="bottom  draft">
							<span>更新于09-11 15:47</span>
							<i class="card-share tribune-card-share"></i>
						</div>
					</div>
				</li>
				<li class="upload-list vux-1px-b">
					<img src="../assets/images/home/defaultImg.jpg" alt="" />
					<div class="desc">
						<p>我是天空里的一片云 偶尔投影在你的波心 你不必讶异 更无须欢喜 在转瞬间消灭了踪影 </p>
						<div class="bottom  draft">
							<span>更新于09-11 15:47</span>
							<i class="card-share tribune-card-share"></i>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'
	import { XHeader, Tab, TabItem } from 'vux'
	export default {
		data() {
			return {
				memberThread: [],
				globalIndex: 0,
				tablist: [{
						name: '已发布',
						type: '0'
					},
					{
						name: '草稿箱',
						type: '1'
					}
				],
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem
		},
		mounted() {
			this.getMyCardList(0);
		},
		methods: {
			//获取已发布列表信息
			getMyCardList: function(index) {
				let more = true;
				let page = 1;
				var _this = this;
				this.globalIndex = index;
				console.log(index);
				this.$http({
					method: 'GET',
					url: '/los/api/forum/member.json'
				}).then((result) => {
					if(result.data.code == 1) {
						this.memberThread = result.data.data.member_thread;
					}
				}).catch((err) => {

				})
				$(window).scroll(function() {
					var htmlHeight = $(document).height();
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							axios.get('/los/api/forum/member.json' + '?page=' + page).then(function(result) {
								$.each(result.data.data.member_thread, function(index, val) {
									_this.memberThread.push(val);
								});
								more = true;
								if(result.data.code == 0) {
									more = false;
								}
							}).catch(function(error) {
								console.log(error);
							});
						}
					}
				})

			},
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped="scoped">
	.header {
		background: #fff;
	}
	
	.upload-wrap .upload-list {
		padding: 0.26rem;
		background: #fff;
		overflow: hidden;
	}
	
	.upload-wrap .upload-list img {
		float: left;
		width: 2.66rem;
		height: 2.66rem;
		border-radius: 0.05rem;
	}
	
	.upload-wrap .upload-list .desc {
		float: left;
		width: 69%;
		margin-left: 0.21rem;
	}
	
	.upload-wrap .upload-list .desc p {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.37rem;
		color: #222;
		line-height: 0.56rem;
	}
	
	.upload-wrap .upload-list .desc .bottom {
		margin-top: 1.2rem;
		font-size: 0.32rem;
		color: #666;
		align-items: center;
		display: flex;
		position: relative;
	}
	
	.upload-wrap .upload-list .desc .note {
		margin-top: 0.53rem;
	}
	
	.upload-wrap .upload-list .desc .bottom .card-share {
		position: absolute;
		right: 0;
	}
	
	.upload-wrap .upload-list .desc h5 {
		font-size: 0.32rem;
		color: #999;
		margin-top: 0.26rem;
	}
	
	.upload-wrap .upload-list .desc .bottom ul {
		overflow: hidden;
	}
	
	.upload-wrap .upload-list .desc .bottom ul li {
		float: left;
		display: flex;
		align-items: center;
		margin-right: 0.53rem;
	}
	
	.upload-wrap .upload-list .desc .bottom ul li span {
		margin-right: 0.13rem;
	}
</style>